<%--
  User: yealove
  Date: 8/20/14
  Time: 11:04 PM
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <c:import url="../common/include.jsp"/>
    <title>团队订餐统计系统</title>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">订餐统计系统
                    <small>v1.0</small>
                </a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active" id="userInfo">
                        <a href="javascript:;" id="poplogin">我要订餐~</a>
                    </li>
                    <li id="admin"></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="row">
        <div class="col-xs-12 col-md-4 col-xs-offset-1">
            <div class="h3">今日菜单：</div>
            <div class="row table-responsive">
                <table class="table table-hover table-condensed">
                    <tr>
                        <th onclick="login()">菜单</th>
                        <th>名称</th>
                        <th>价格</th>
                        <th>订餐</th>
                    </tr>
                    <c:if test="${menus != null}">
                        <c:forEach items="${menus}" var="menu" varStatus="s">
                            <tr>
                                <td>${s.index+1}</td>
                                <td>${menu.name}</td>
                                <td>${menu.price}</td>
                                <td>
                                    <button class="btn btn-primary btn-xs"
                                            onclick="eatThis('${menu.id}', '${menu.price}', '${menu.name}')">订
                                    </button>
                                </td>
                            </tr>
                        </c:forEach>
                    </c:if>
                    <c:if test="${menus == null}">
                        <tr>
                            <td colspan="4" style="text-align: center">无记录</td>
                        </tr>
                    </c:if>
                </table>
            </div>
        </div>
        <div class="col-xs-12 col-md-6 col-xs-offset-1" style="border-left: rgba(0, 0, 0, 0.2) solid 1px">
            <small style="float: right">
                今日已点 - <a href="javascript:;">
                <span class="glyphicon glyphicon-repeat" id="refresh"></span>
            </a>
            </small>
            <div class="row table-responsive col-xs-offset-1" id="orders">
            </div>
        </div>
        <div class=" col-xs-12 col-md-4 col-xs-offset-1" style="float: right">
            <ul class="list-group">
                <li class="list-group-item" style="float: right">
                    <a href="javascript:;" id="tongji"> 统计</a>
                </li>
            </ul>
            <div class="row table-responsive col-xs-offset-1" id="cal">
            </div>
        </div>
    </div>
    <div>
        <div style="display: none; margin: 20px;" id="loginDiv">
            <form id="form1" class="form-horizontal" role="form" method="post">
                <div class="form-group">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">用户名：</label>

                        <div class="col-sm-8">
                            <input type="text" class="form-control input-sm" name="username" placeholder="用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">密码：</label>

                        <div class="col-sm-8">
                            <input type="password" class="form-control input-sm" name="password" placeholder="密码"
                                   onkeyup="if(event.keyCode == 13) doLogin()">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="button" onclick="doLogin();" class="btn btn-primary btn-block" value="登录">
                        <input type="button" onclick="reg();" class="btn btn-primary btn-block" value="注册">
                    </div>
                </div>
            </form>
        </div>
        <div style="display: none; margin: 10px;" id="register">
            <form id="form2" class="form-horizontal" role="form" method="post">
                <div class="form-group">
                    <label for="username" class="col-sm-4 control-label">用户名：</label>

                    <div class="col-sm-8">
                        <input id="username" type="text" class="form-control input-sm" name="username"
                               placeholder="用户名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-4 control-label">密码：</label>

                    <div class="col-sm-8">
                        <input id="password" type="text" class="form-control input-sm" name="password" placeholder="密码"
                               onkeyup="if(event.keyCode == 13) doReg()">
                    </div>
                </div>
                <div class="form-group">
                    <label for="name" class="col-sm-4 control-label">姓名：</label>

                    <div class="col-sm-8">
                        <input id="name" type="text" class="form-control input-sm" name="name" placeholder="姓名"
                               onkeyup="if(event.keyCode == 13) doReg()">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="button" onclick="doReg();" class="btn btn-primary btn-block" value="注册">
                        <input type="button" onclick="login();" class="btn btn-primary btn-block" value="取消">
                    </div>
                </div>
            </form>
        </div>
        <div style="display: none" id="memo">
            <div class="form-group">
                <div class="col-sm-10">
                    <textarea class="form-control" row="2" cols="80" id="memoValue"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var userId = "${user_info.id}";
    var loginIndex;
    var regIndex;
    login = function () {
        layer.close(regIndex);
        loginIndex = $.layer({
            type: 1,
            title: '用户登录',
            border: [5, 0.5, '#666'],
            area: ['240px', '260px'],
            shadeClose: true,
            fix: true,
            page: {dom: "#loginDiv"},
            end: function () {
                $(":password").val("");
            }
        });
        $("[name='username']").focus();
    }

    doLogin = function () {
        var loadingIndex = layer.load("登录中...");
        $.ajax({url: "/lunchparty/login.do", type: "POST", data: $(form1).serialize(), success: function (user) {
            if (user == "") {
                layer.close(loadingIndex);
                layer.alert("用户名或密码有误", 8);
            } else {
                window.location.reload();
            }
        }});
    }

    toAdmin = function () {
        window.location = "/lunchparty/admin.do";
    }
    reg = function () {
        layer.close(loginIndex);
        regIndex = $.layer({
            type: 1,
            title: '用户注册',
            border: [5, 0.5, '#666'],
            area: ['250px', '260px'],
            fix: true,
            page: {dom: "#register"},
            end: function () {
                $(":password").val("");
            }
        });
        $("[name='username']", form2).focus();
    }

    doReg = function () {
        var loadingIndex = layer.load("注册中...");
        $.ajax({url: "/lunchparty/reg.do", type: "POST", data: $(form2).serialize(), success: function (user) {
            if (user == "exist") {
                layer.close(loadingIndex);
                layer.alert("用户名已注册！", 8);
            } else {
                var html = '<a href="javascript:;" id="username" onclick="myInfo()">' + user.name + '</a>';
                $("#userInfo").html(html);
                tipsMe(user.money);
                userId = user.id;
                layer.close(loadingIndex);
                layer.close(loginIndex);
                layer.close(regIndex);
            }
        }});
    }

    eatThis = function (menuId, price, name) {
        if (userId == "") {
            login();
        } else {
            if ("${closedTips.status}" == 1) {
                $.layer({
                    shade: [0],
                    area: ['auto', 'auto'],
                    dialog: {
                        msg: '负责人已经订餐，如果需要加订请联系负责人！',
                        btns: 2,
                        type: 4,
                        btn: ['继续订餐~~', '算了，不订了'],
                        yes: function () {
                            do_eatThis(menuId, price, name);
                        },
                        no: function () {
                            return;
                        }
                    }
                });
            } else {
                do_eatThis(menuId, price, name);
            }
        }
    }

    do_eatThis = function (menuId, price, name) {
        var memo = $.layer({
            type: 1,
            shade: [0],
            title: '备注',
            border: [5, 0.5, '#666'],
            area: ['300px', '180px'],
            btns: 2,
            btn: ['确定', '取消'],
            fix: true,
            page: {dom: "#memo"},
            yes: function () {
                var url = "/lunchparty/eatThis.do?time=" + new Date().getTime();
                var data = "menuId=" + menuId + "&price=" + price + "&memo=" + $("#memoValue").val() + "&menuName=" + name;
                $.ajax({url: url, async: false, type: "post", data: data, success: function (data) {
                    layer.close(memo);
                    alertMe(data);
                }})
                tipsMe();
            }
        });
    }
    var userMoney;
    tipsMe = function (money) {
        if (money == null) {
            $.ajax({url: "/lunchparty/getMoney.do?time=" + new Date(), async: false, success: function (data) {
                money = data;
            }})
        }
        layer.close(userMoney);
        var color = ['background-color:#c00; color:#fff', '#c00'];

        if (money > 15) {
            color = ['background-color:#0FA6D8; color:#fff', '#0FA6D8'];
        }

        if (money <= 15 && money >= 0) {
            color = '';
        }

        userMoney = layer.tips("余额：" + money, "#userInfo", {
            style: color,
            maxWidth: 130,
            closeBtn: [0, true]
        });
    }

    myInfo = function () {
        window.location = "/lunchparty/userInfo.do";
    }

    $(function () {
        $("#loginDiv :input").click(function () {
            $("#errorInfo").html("&nbsp;");
        })

        $('#poplogin').click(login);

        $("#refresh").click(function () {
            var url = "/lunchparty/todayOrder.do";
            $.ajax({url: url, dataType: "json", success: function (data) {
                laytpl($("#orderList").html()).render(data, function (html) {
                    $("#orders").html(html);
                });
            }});
        });
        $("#tongji").click(function () {
            var url = "/lunchparty/calc.do";
            $.ajax({url: url, dataType: "json", success: function (data) {
                laytpl($("#calc").html()).render(data, function (html) {
                    $("#cal").html(html);
                });
            }});
        })

        if ("${user_info.name}") {
            if ('${user_info.isAdmin}' == 1) {
                var admin = '<a href="javascript:;" onclick="toAdmin()">管理</a>';
                $("#admin").html(admin);
            }
            var html = '<a href="javascript:;" id="username" onclick="myInfo()">${user_info.name}</a>';
            $("#userInfo").html(html);
            tipsMe('${user_info.money}');
            userId = '${user_info.id}';
        }
    })

</script>
<script id="orderList" type="text/html">
    <table class="table table-hover table-condensed">
        {{#
        if(d.length>0) {
        for(var i=0, n=d.length; i
        <n
        ; i++) {
        }}
        <tr>
            <td>{{ i+1 }}</td>
            <td>{{ d[i].name }}</td>
            <td>{{ d[i].menuName }}</td>
            <td>{{ d[i].memo }}</td>
            <td>{{ d[i].price }}</td>
        </tr>
        {{#
        }
        } else {
        }}
        <tr>
            <td colspan="3" style="text-align: center">无</td>
        </tr>
        {{#
        }
        }}
    </table>
</script>
<script id="calc" type="text/html">
    <table class="table table-hover table-condensed">
        {{#
        var count = 0;
        var money = 0;
        if(d.length>0) {
        for(var i=0, n=d.length; i
        <n
        ; i++) {
        count += parseInt(d[i].dictname);
        money += parseInt(d[i].groupid);
        }}
        <tr>
            <td>{{ d[i].dictid }}</td>
            <td>{{ parseInt(d[i].dictname) }}</td>
            <td>{{ parseInt(d[i].groupid) }}</td>
        </tr>
        {{#
        }
        }}
        <tr class="info">
            <td>总计：</td>
            <td>{{ count }}</td>
            <td>{{ money }}</td>
        </tr>
        {{#
        } else {
        }}
        <tr>
            <td colspan="3" style="text-align: center">无</td>
        </tr>
        {{#
        }
        }}
    </table>
</script>
</html>

